﻿<%@ page title="" language="C#" masterpagefile="~/master/main.master" autoeventwireup="true" inherits="dev_generatecss" Codebehind="minify.aspx.cs" %>

<asp:content id="Content1" contentplaceholderid="head" runat="Server">

	<script type="text/javascript" src="<%= ResolveUrl("~/dev/") %>json2.js"></script>
	<script type="text/javascript">
		var $txCss;
		$(function () {
			var cssSheet = document.styleSheets[document.styleSheets.length - 1],
			csstext = cssSheet.ownerNode.textContent;
			csstext = csstext.replace(/<%= UI_GetDevLocation() %>/gi, "")
			.replace(/\"/gi, "\'");
			$txCss = $("#txCss");

			$txCss.text(csstext);
			$txCss.data("ltr", csstext);

			$(".submitcss").attr("data-params", JSON.stringify({ cssText: csstext, path: "sh.min.css" }));

			$("#rtlStyles").load(function () {

				var rtlcsstext = rtlAltaf(cssSheet);
				$txCss.data("rtl", rtlcsstext);
				$(".submitrtlcss").attr("data-params", JSON.stringify({ cssText: rtlcsstext, path: "sh.rtl.min.css" }));

			});

		});

		function rtlAltaf(sheet) {
			// this way is better, i just append the new overriding rules
			var str = "";

			for (var i = 0; i < sheet.cssRules.length; i++) {
				
				var rule = sheet.cssRules[i];
				
				switch (rule.type) {
					case 1:
						
						str += rtlAltafMirror(rule);
						break;
					case 4: // media
						var mediastr = "";
						for (var j = 0; j < rule.cssRules.length; j++) {
							mediastr += rtlAltafMirror(rule.cssRules[j]);
						}
						if (mediastr != "") {
							str += "\n@media " + rule.media.mediaText + " { ";
							str += mediastr;
							str += "\n}";
						}

						break;
					default:
						continue;
				}



			}

			// now append the special ui.rtl.css from the last stylesheet in doc
			var doc = document.getElementById("rtlStyles").contentDocument;
			var arStyles = doc.styleSheets[doc.styleSheets.length - 1];

			str += "\n" + arStyles.ownerNode.innerText;

			$("#txRtl").text(str);
			return str;
		}
		
		function rtlAltafMirror(rule) {

			// check the existence of right or left in css text
			
			if (rule.cssText.indexOf("left") < 0 && rule.cssText.indexOf("right") < 0 && rule.cssText.indexOf("background-position") < 0) return "";
			
			var str = "";

			for (var j = 0; j < rule.style.length; j++) {

				var propName = rule.style[j];
				var propPro = (rule.style.getPropertyPriority(propName) != "" ? "!important" : "");

				// if margin or padding, margin-left: 12px => margin-right: 12px; margin-left: 0;
				if (propName.indexOf("left") > -1) {

					// check right, if exists, swap, else zero
					var rPropName = propName.replace("left", "right"),
								value = rule.style.getPropertyValue(propName),
								rvalue = rule.style.getPropertyValue(rPropName);

					if (value == rvalue) continue;

					//newStyle.style.push({ "name": rPropName, "value": value + propPro });
					str += rPropName + ":" + value + propPro + ";\n";

					if (!rvalue) {
						//reset
						rvalue = "0";
						// switch case of width, style and color
						if (propName.indexOf("color") > -1 || propName.indexOf("style") > -1) {
							rvalue = "none";
						} else if (propName === "left") {
							rvalue = "auto";
						}

					}
					//newStyle.style.push({ "name": propName, "value": rvalue + propPro });
					str += propName + ":" + rvalue + propPro + ";\n";
				}
				// if right exists, check left, if defined, move on
				if (propName.indexOf("right") > -1) {
					var lPropName = propName.replace("right", "left"),
								value = rule.style.getPropertyValue(propName),
								lvalue = "0";
					if (rule.style.getPropertyValue(lPropName) == null || rule.style.getPropertyValue(lPropName) === "") {
						//newStyle.style.push({ "name": lPropName, "value": value + propPro });
						str += lPropName + ":" + value + propPro + ";\n";

						// switch case of width, style and color
						if (propName.indexOf("color") > -1 || propName.indexOf("style") > -1) {
							lvalue = "none";
						} else if (propName === "right") {
							lvalue = "auto";
						}
						//newStyle.style.push({ "name": propName, "value": lvalue + propPro });
						str += propName + ":" + lvalue + propPro + ";\n";
					}
				}
				// background position special case
				if (propName == "background-position-x") {
					// experimental, left over 100%, dont fix pixels
					var pValue = rule.style.getPropertyValue("background-position-x");
					if (pValue.indexOf("%") > -1) {
						str += "background-position:" + (100 - parseInt(pValue)) + "% " + rule.style.getPropertyValue("background-position-y");
					}
				}
				// now check values (float basically)
				var pValue = rule.style.getPropertyValue(propName);
				if (pValue.indexOf("left") > -1 || pValue.indexOf("right") > -1) {
					
					//newStyle.style.push({ "name": propName, "value": (rule.style.getPropertyValue(propName)).replace("left", "tempr").replace("right", "left").replace("tempr", "right") + propPro });
					str += propName + ":" + pValue.replace("left", "tempr").replace("right", "left").replace("tempr", "right") + propPro + ";\n";
				}

			}
			if (str == "") return "";

			return "\n" + rule.selectorText + " {" + str + " } \n";
		}
		
		function rtlCssRules(sheet) {

			var doc = document.getElementById("rtlStyles").contentDocument;
			var head = doc.head;

			var arStyles = doc.styleSheets[doc.styleSheets.length - 1];


			var arSheet = doc.createElement("STYLE");
			//for (x in sheet) console.log(x + " = " + sheet[x]);
			arSheet.innerHTML = sheet.ownerNode.textContent;

			//arSheet.media = "screen and (max-width: 200px)"; // just in case
			

			head.appendChild(arSheet);

			var newsheet = arSheet.sheet;
			
			var str = "";
			for (var i = 0; i < newsheet.cssRules.length; i++) {

				switch (newsheet.cssRules[i].type) {
					case 1:
						console.log(newsheet.cssRules[i].style);
						str += replaceRights(newsheet.cssRules[i]);
						break;
					case 4: // media
						var mediastr = "\n@media " + newsheet.cssRules[i].media.mediaText + " { ";
						for (var j = 0; j < newsheet.cssRules[i].cssRules.length; j++) {
							mediastr += replaceRights(newsheet.cssRules[i].cssRules[j]);

						}
						mediastr += "\n}";
						str += mediastr;

						break;
					//				case 5: // font face is not required 
					//					continue; 
					//				break; 
					default: // everything else stays the same
						continue;

				}

			}
			// now append the special ui.rtl.css from the last stylesheet in doc
			str += "\n"+ arStyles.ownerNode.innerText;

			$("#txRtl").text(str);

			return str;
		}
		function replaceRights(rule) {
			// i have to fetch shorthands for border-width border-style border-color margin and padding, if more than three elements occur, make the switch between second and last, which is tricky
			// easier: go thru the list of all properties, and rebuild only if u find one of the above, else just replace and move on

			//for(b = 0; b < rule.style.length; b++) console.log(rule.style[b]);

			rule.style.cssText = rule.style.cssText
					.replace(/left/gi, "tempdir")
					.replace(/right/gi, "left")
					.replace(/tempdir/gi, "right");
//			for (var b; b < rule.style.length; b++) {
//				consol.log(rule.style[b]);
//			}
			return "\n\r" + rule.cssText;
		}
		function cssMinified(data) {
			$("#result").html("Css Minified: ").show();
			$("<a />").html(data.d).attr("href", data.d).appendTo("#result");
		}
		function jsMinified(data) {

			$("#jsresult").html("").show();
			var d = jQuery.parseJSON(data.d);
			strout = "Javascript Minified: <br />Original files: <br />";
			$.each(d.ShMinified.Files, function (i, o) {
				strout += o + "<br />";
			});
			strout += "file generated: ";
			strout += "<a href='{0}'>{0}</a><br />".format(d.ShMinified.newPath, d.ShMinified.newPath);

			strout += "UI Original files: <br />";
			$.each(d.UiMinified.Files, function (i, o) {
				strout += o + "<br />";
			});
			strout += "file generated: ";
			strout += "<a href='{0}'>{0}</a><br />".format(d.UiMinified.newPath, d.UiMinified.newPath);


			$("#jsresult").html(strout);
		}
	</script>
</asp:content>
<asp:content id="Content2" contentplaceholderid="bodycontent" runat="Server">
<h1 runat="server" visible="false" id="h1">This page works only in Chrome</h1>
	<section class="incols">
	<p>
		Compile output less and minify, generate css/sh.css</p>
	<p>
		<span class="btn btninplace small">LTR Styles</span>
	</p>
	<textarea class="w10 hl ltr" id="txCss"></textarea>
	<p>
		<span class="btn btninplace small">RTL Styles</span>
	</p>
	
	<textarea class="w10 hl ltr" id="txRtl"></textarea>
	<br />
	<p>
		<a href="<%= ResolveUrl("~/dev/") %>dev.minify.asmx/MinifyCss" class="btnrev submitcss"
			data-behavior="InplaceAjax" data-onfinish="cssMinified">Generate CSS files</a></p>
	<p>
		<a href="<%= ResolveUrl("~/dev/") %>dev.minify.asmx/MinifyCss" class="btnrev submitrtlcss"
			data-behavior="InplaceAjax" data-onfinish="cssMinified">Generate RTL CSS files</a></p>

	<p class="hidden yellowbox" id="result">
	</p>

	<p>
		<a href="<%= ResolveUrl("~/dev/") %>dev.minify.asmx/MinifyJs" class="btnrev submitjs"
			data-behavior="InplaceAjax" data-onfinish="jsMinified">Generate JS files</a></p>
	<iframe id="rtlStyles" width="1" height="1" src="<%= ResolveUrl("~/dev/") %>arstyles.aspx?3">
	</iframe>

</section>
</asp:content>
